<template>
  <div class="goods-list-container">
    <my-header title="商品列表页"></my-header>
    <my-table :list="list">
      <template #header>
        <th>编号</th>
        <th>名称</th>
        <th>人民币</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #body="scope">
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.goods_name }}</td>
        <td>{{ scope.row.goods_price }}</td>
        <td>
          <span
            style="margin-left: 5px"
            class="badge bg-warning"
            v-for="(item, index) in scope.row.tags"
            :key="index"
            >{{ item }}
          </span>
        </td>
        <td>
          <button @click="del(scope.row.id)" class="btn btn-danger btn-sm">
            删除
          </button>
        </td>
      </template>
    </my-table>
  </div>
</template>

<script>
// 目标1: 渲染数据
// MyTable 是我们封装的复用组件, 所以数据应该在使用该组件的地方获取并传入, 不要在 MyTable 内发请求
// 1.1 在 MyGoodsList.vue 的 created 中发起 ajax 请求获取数据
// 1.2 获取到数据后存储在 data 中
// 1.3 将 data 中的 list 传给 MyTable.vue
// 1.4 在 MyTable.vue 中进行渲染(记得给删除按钮加 bs 样式)

// 目标2: 使用插槽
// MyTable 组件的灵活度不够, 使用插槽来提高它的灵活度, 在任何场景下都可以根据需求来决定内部的标签
// 2.1 在 MyTable 中定义两个插槽 slot 标签 表头和表体
// 2.2 给两个 slot 标签添加 name 属性
// 2.3 在 MyGoodsList 组件中使用 MyTable 时传入两个 template 并设置插槽名称 #
// 2.4 表体的数据需要使用作用域插槽传递给 MyGoodsList 使用

// 目标3: 渲染标签
// 3.1 使用 v-for 循环渲染作用域插槽传递过来的 scope.row.tags 数组
// 3.2 设置 badge 样式(查官网)
// 3.3 设置一个 margin 隔开一点

// 目标4: 删除数据
// 4.1 给删除按钮绑定点击事件(事件处理函数在 MyGoodsList 中声明)
// 4.2 传递 id 给事件处理函数
// 4.3 根据 id 找到索引, 最后根据索引删除数据
import MyHeader from "../components/MyHeader.vue";
import MyTable from "../components/MyTable.vue";
export default {
  components: {
    MyHeader,
    MyTable,
  },
  data() {
    return {
      list: [],
    };
  },
  async created() {
    //   页面加载发起ajax请求
    let res = await this.$http({
      url: "/api/goods",
    });
    this.list = res.data.data;
  },

  mounted() {},

  methods: {
    del(id) {
      let index = this.list.findIndex((item) => item.id == id);
      this.list.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.goods-list-container {
  padding-top: 45px;
}
</style>